<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import { ArrowDown, CircleCheck, Delete, Warning } from '@element-plus/icons-vue'
  import FaultTypeDialog from './FaultTypeDialog.vue'

  defineOptions({
    name: 'KnowFaultTypesHeader',
  })

  const props = defineProps({
    selectedFaultType: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'multiple-enable'): void
    (e: 'multiple-disable'): void
    (e: 'multiple-delete'): void
    (e: 'get-list'): void
  }>()

  // 添加分类弹窗显示状态
  const addTypeDialogVisible = ref(false)

  /**
   * 搜索
   */
  const getList = () => {
    emits('get-list')
  }
</script>

<template>
  <div class="know-fault-types-header">
    <div class="btn-group">
      <HPlainButton @click="addTypeDialogVisible = true"> 添加分类 </HPlainButton>
      <el-dropdown trigger="click">
        <HButton :disabled="props.selectedFaultType.length <= 0">
          批量操作
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </HButton>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="emits('multiple-enable')">
              <el-icon>
                <CircleCheck />
              </el-icon>
              批量启用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-disable')">
              <el-icon>
                <Warning />
              </el-icon>
              批量禁用
            </el-dropdown-item>
            <el-dropdown-item @click="emits('multiple-delete')">
              <el-icon>
                <Delete />
              </el-icon>
              批量删除
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <fault-type-dialog v-model:visible="addTypeDialogVisible" @update="getList"></fault-type-dialog>
  </div>
</template>

<style scoped lang="scss">
  .know-fault-types-header {
    display: flex;
    justify-content: space-between;

    .btn-group {
      display: flex;
      column-gap: 5px;
    }

    .search {
      display: flex;
      column-gap: 5px;
    }
  }
</style>
